import React, { Component } from 'react';
import {Link} from "react-router-dom";
import { Icon } from 'zent';
import "./Home.css";
import 'zent/css/index.css';
class Home extends Component {
  constructor(props){
    super(props)
    this.state = {
       anniu:[{name:"推荐",path:"/home/model1"},{name:"歌手",path:"/home/model2"},{name:"排行榜",path:"/home/model3"}],
      select:0
    } 
    // this.TiaoXB = this.TiaoXB.bind(this)
  };
  // 以下是用data-id的方法
  // TiaoXB(e){
  //   localStorage.setItem("kind",e.currentTarget.dataset.id)
  //   this.setState({
  //     select:e.currentTarget.dataset.id
  //   })
  // }
  // 以下是直接绑定index方法  两者区别是this指向
  TiaoXB(index){
    console.log(index)
    localStorage.setItem("kind",index);
    this.setState({
      select:index
    })
  }
  render() {
    return (
      <div>
        <div className="T-top">
          <div className="NavBar">
            <div><Icon type="flow-o" spin className="zenticon-demo" /></div>
            <div className="T-title">网易云音乐</div>
            <div><Icon type="search" /></div>
          </div>
          <div className="link">
            {this.state.anniu.map((item,index)=><Link key={index} to={item.path} onClick={this.TiaoXB.bind(this,index)} data-id={index}  className={this.state.select==index?"T-xiabiao":""}>{item.name}</Link>)}
          </div>
        </div>

        <div>{this.props.children}</div>
      </div>
    );
  }
  componentDidMount(){
    // localStorage.getItem("kind")
    console.log(localStorage.getItem("kind"));
    this.setState({
      select:localStorage.getItem("kind")
    })
  }
}

export default Home;